{% extends "menu.html" %}

{% block title %}profile{% endblock %}

{% block content %}
    {# 继承menu.html之后, 使用<div>来规避默认行为 #}
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
        <div class="w-full max-w-md p-8 bg-white rounded-lg shadow-md">
            <h2 class="text-2xl font-bold mb-6 text-center">注册</h2>
            <form id="register-form" method="POST" action="/register" onsubmit="combineEmail()">
                <div class="mb-4">
                    <label for="nickname" class="block text-sm font-medium text-gray-700">昵称</label>
                    <input type="text" id="nickname" name="nickname" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>
                <div class="mb-3 flex items-center">
                    <div class="flex-grow">
                        <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                        <div class="flex">
                            <input type="text" id="email-prefix" name="email-prefix" required
                                   class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                                   placeholder="请输入学号">
                            <span class="ml-1 text-gray-500" style="line-height: 3.5;">@gdufs.edu.cn</span>
                        </div>
                    </div>
                    <!-- 隐藏的完整邮箱字段 -->
                    <input type="hidden" id="email" name="email">
                    <div class="ml-2">
                        <button type="button" id="send-code-btn"
                                class="bg-indigo-600 text-white px-4 py-2 mt-6 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 whitespace-nowrap">
                            获取验证码
                        </button>
                    </div>
                </div>
                <div class="mb-6">
                    <label for="verification" class="block text-sm font-medium text-gray-700">验证码</label>
                    <input type="text" id="verification" name="verification" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    <input type="password" id="password" name="password" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>
                <button type="submit"
                        class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                    注册
                </button>
            </form>
            <p id="error-message" class="mt-4 text-red-500 text-sm text-center hidden">注册失败，请重试</p>
        </div>

        <script>
            function combineEmail() {
                const emailPrefix = document.getElementById('email-prefix').value;
                document.getElementById('email').value = emailPrefix + '@gdufs.edu.cn';
            }

            document.getElementById('send-code-btn').addEventListener('click', async () => {
                const emailPrefix = document.getElementById('email-prefix').value;
                const email = emailPrefix + '@gdufs.edu.cn';
                if (!emailPrefix) {
                    alert('请输入邮箱地址');
                    return;
                }

                // Disable the button and start countdown for 60 seconds
                const sendCodeBtn = document.getElementById('send-code-btn');
                let countdown = 60;
                sendCodeBtn.disabled = true;
                sendCodeBtn.innerText = `再次获取(${countdown})`;

                const timer = setInterval(() => {
                    countdown--;
                    if (countdown <= 0) {
                        clearInterval(timer);
                        sendCodeBtn.disabled = false;
                        sendCodeBtn.innerText = '获取验证码';
                    } else {
                        sendCodeBtn.innerText = `再次获取(${countdown})`;
                    }
                }, 1000);

                try {
                    const response = await fetch('/send_verification_code', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: new URLSearchParams({email})
                    });

                    if (!response.ok) {
                        throw new Error('发送验证码失败');
                    }

                    alert('验证码已发送到您的邮箱！');

                } catch (error) {
                    alert('发送验证码失败，请重试');
                    clearInterval(timer);
                    sendCodeBtn.disabled = false;
                    sendCodeBtn.innerText = '获取验证码';
                }
            });
        </script>
    </div>

{% endblock %}
}